<template>
  <div style="margin-top: 60px;margin-left: 330px;width: 300px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="学号" prop="stuId">
        <el-input v-model="ruleForm.stuId"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="stuName">
        <el-input v-model="stuName"></el-input>
      </el-form-item>

      <el-form-item label="原因" prop="aSeason">
        <el-input v-model="ruleForm.aSeason"></el-input>
      </el-form-item>

      <el-form-item label="楼层">
        <el-select v-model="ruleForm.bId" placeholder="请选择楼层">
          <el-option
              v-for="item in buildingList"
              :key="item.bid"
              :label="item.bmsg"
              :value="item.bid"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="宿舍">
        <el-select
            v-model="ruleForm.dorId"
            collapse-tags
            placeholder="请选择宿舍">
          <el-option
              v-for="item in dormitoryList"
              :key="item.dorId"
              :label="item.dorName"
              :value="item.dorId"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "AbsentRegister",
  data() {
    return {
      category:null,
      ruleForm: {
        dId:'',
        stuId:'',
        aDate:'',
        aSeason:'',
        bId:'',
        dorId: ''
      },
      stuName: '',
      buildingList: '',
      dormitoryList:'',
      rules: {
        stuId: [
          { required: true, message: '请输入学号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        aSeason: [
          { required: true, message: '请输入原因', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this=this;
      const date=new Date();
      _this.ruleForm.dId=JSON.parse(window.localStorage.getItem('dormitoryAdmin')).data.did;
      _this.ruleForm.aDate=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();
      console.log(_this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get('http://192.168.163.234:8081/absent/save', {params:_this.ruleForm}).then(
              function (response) {
                if (response.data.code==0){
                  _this.$alert(_this.stuName+'添加成功!','',{
                    confirmButtonText:'确定',
                    callback:action => {
                      _this.$router.push('/absentRecord2')
                    }
                  })
                }
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  /**
   * 监视bId动向
   */
  watch: {
    "ruleForm.bId":{
      handler(newValue,oldValue){
        const _this=this;
        axios.get('http://192.168.163.234:8081/dormitory/availableList/'+newValue).then(
            function (response){
              _this.dormitoryList=response.data.data;
            }
        )
      }
    }
  },
  /**
   * 加载页面时就获取楼层
   */
  created() {
    const _this=this
    axios.get('http://192.168.163.234:8081/building/buildList').then(
        function (response) {
          _this.buildingList=response.data.data
        }
    )
  }
}
</script>

<style scoped>

</style>
